﻿@{
    ViewBag.Title = "Home Page";
}

<input type="hidden" id="clientGuid" value="@Guid.NewGuid().ToString()"/>

<div style="margin-left: 30px; width: 1500px;">
    <div class="board-header-container">
        <div class="block">
            <div class="border-right"></div>  
            <h2>To Do</h2>        
        </div>
        <div class="block">
            <div class="border-left"></div>
            <div class="border-right"></div>  
            <h2>In Progress</h2>
        </div>
        <div class="block">
            <div class="border-left"></div>
            <h2>Done</h2>
        </div>
        <div style="clear: both;"></div>
    </div>

    <div id="TaskBoard" style="width: 1500px; height: 600px;">
        <div id="stickers-container" class="stickers-container">
            <div id="sticker_1" class="sticker" style="left: 40px; top: 90px;">
                <div class="sticker-content">
                    Crap develop crocodile crazy McChicken
                </div>
            </div>
            <div id="sticker_2" class="sticker" style="left: 170px; top: 90px;">
                <div class="sticker-content">
                    Create list of available task sprint boards
                </div>
            </div>
            <div id="sticker_3" class="sticker" style="left: 300px; top: 90px;">
                <div class="sticker-content">
                    Crap develop crocodile crazy McChicken
                </div>
            </div>
        </div>
        <div id="sectionToDo" class="sticker-section" style="width: 500px; height: 600px; float:left;">
        <div style="clear: both;"></div>
            <div style="float: right; width: 1px; background-color: #333333; height:100%; position:relative;"></div>
        </div>
        <div id="sectionInProgress" class="sticker-section"  style="width: 500px; height: 600px; float:left;">
            <div style="float: left; width: 1px; background-color: #333333; height:100%; position:relative;"></div>
            <div style="float: right; width: 1px; background-color: #333333; height:100%; position:relative;"></div>  
        </div>
        <div id="sectionDone" class="sticker-section" style="width: 500px; height: 600px; float:left;">
            <div style="float: left; width: 1px; background-color: #333333; height:100%; position:relative; z-index:0"></div>
        </div>
        @*<div class="well" style="position: fixed; left: 1500px;">
            <div style="width: 100px; height:100px; background-color: powderblue;">
                <div style="font-size: 72px; color: red; padding-top: 24px;">×</div>
                Delete
            </div>
            <div style="width: 100px; height:100px;">
                Postpone
            </div>
        </div>*@

        @*<div id="sectionPending" class="sticker-section " style="width: 500px; height: 200px; float: left;"></div>*@
    </div>
</div>

<form class="form-horizontal">
    <div class="modal" id="myModal" style="display: none;">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Sticker details</h3>
        </div>
        <div class="modal-body">
            <p>Loading…</p>
            <div class="progress progress-info progress-striped active">
                <div class="bar" style="width: 100%;"></div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-danger" style="float: left;">Delete</a>
            <a href="#" class="btn btn-warning" style="float: left;">Postpone</a>

            <a href="#" class="btn btn-primary">Save changes</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>
</form>

@section scripts{
    <style>
        body {padding-top: 40px;}
    </style>
    <script src="@Url.Content("~/Scripts/SnowBoard/SnowBoard.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.signalR.js")" type="text/javascript"></script>
    <script src="@Url.Content("../signalr/hubs")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var snowBoard = new SnowBoard('#TaskBoard');
        });
    </script>
}
